<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-23 15:39:11
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-26 09:20:46
 * @FilePath: \fbhgl_client\src\pages\park\booking-management\whitelist\index.page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { enclosureParkNumberGetUsingGet } from "@/genapi/wh-yqd";
import type { UploadProps } from "element-plus";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import detailDialog from "./detail-dialog.vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

defineOptions({ name: "IndexPage" });

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
	response,
	uploadFile,
) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
	if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
		ElMessage.error("请选择图片");
		return false;
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error("图片大小不得超过2MB");
		return false;
	}
	return true;
};

onMounted(() => {});
</script>

<template>
	<div class="pageContent">
		<div class="userInfo">
			<el-upload
				class="avatar-uploader"
				action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
				:show-file-list="false"
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload"
				style="
					width: 90px;
					height: 90px;
					margin-top: 40px;
					border: 1px solid #d9d9d9;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				"
			>
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<img src="./assets/user.png" style="margin-top: 0px" v-else />
			</el-upload>
			<div class="roleName">{{ userStore.userInfo?.roleName ?? "--" }}</div>
			<div class="userName">{{ userStore.userInfo?.realname ?? "--" }}</div>
			<div class="loginTime">
				最近登陆时间：{{ userStore.userInfo?.createTime ?? "--" }}
			</div>
			<div class="loginEquipment">
				登陆设备：{{ userStore.userInfo?.clientIp ?? "--" }}
			</div>
		</div>
		<div class="userDetails">
			<detailDialog> </detailDialog>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.pageContent {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 18px;
	justify-content: space-between;
	.userInfo {
		width: 350px;
		height: 350px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		div {
			margin-top: 5px;
			font-size: 14px;
			color: gray;
		}
		.roleName {
			margin-top: 20px;
			font-size: 18px;
			color: #000;
			font-weight: 600;
		}
		img {
			width: 90px;
			height: 90px;
			margin-top: 40px;
		}
		.loginTime {
			margin-top: 40px;
		}
	}
	.userDetails {
		width: calc(100% - 370px);
		height: 100%;
		background-color: #fff;
		padding: 30px;
	}
}
</style>
